<template>
  <div class="rolesPage">
    <page-template>
      <div slot="title">
        {{ title }}
      </div>
      <div slot="headerRight">
        <el-button
          type="success"
          @click="handlerCommand(Type.Create)"
        >
          {{ createBtnText }}
        </el-button>
      </div>
      <div
        slot="content"
        class="content"
      >
        <search-template
          ref="search"
          :search-params="defSearchOptions"
          @on-reset="onReset"
          @on-search="onSearch"
          @on-filter="onFilter"
        >
        </search-template>

        <crud-template
          ref="table"
          style="margin-top:20px"
          :loading="tableDataLoading"
          :total="tableDataTotal"
          :table-data="tableData"
          :table-option="tableOptions"
          @pagination-change="onPaginationChange"
        >
          <template #level="{row}">
            <el-tag v-if="row.level === RoleLevel.FirstLevel">
              一级
            </el-tag>
            <el-tag
              v-if="row.level === RoleLevel.SecondLevel"
              type="success"
            >
              二级
            </el-tag>
          </template>

          <template #menu="{row}">
            <dropdown-btn
              :id="row.id"
              :loading="tableDataStatus[row.id].loading"
              :btn-list="dropdownBtns"
              @handler-command="handlerCommand"
            ></dropdown-btn>
          </template>
        </crud-template>
      </div>
    </page-template>
    <role-permission ref="rolePermission"></role-permission>
    <create-item
      ref="form"
      @on-change="getTableData"
    ></create-item>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import PageTemplate from '@/components/PageTemplate/index.vue'
import SearchTemplate from '@/components/SearchTemplate/index.vue'
import CrudTemplate from '@/components/CrudTemplate/index.vue'
import DropdownBtn from '@/components/DropdownBtn/index.vue'
import RolePermission from './permission.vue'
import CreateItem from './CreateItem.vue'
import { tableOptions } from './TableOptions'
import { searchOptions } from './SearchOptions'
import { getRoles, deleteRole } from '@/api/role.ts'
import { RoleLevel } from '@/models/role.ts'
import { setTimeout } from 'timers'
import { isNotEmpty } from '@/utils/validate'
import BaseCurd from '@/models/baseCrud'
import ICrud from '@/models/crud'
import { SearchParam } from '@/models/searchParams'
import { TableOptions } from '@/models/tableOptions'
import { DropdownOption, Type } from '@/models/form'

@Component({
  components: {
    PageTemplate,
    SearchTemplate,
    CrudTemplate,
    RolePermission,
    CreateItem,
    DropdownBtn
  }
})
export default class Page extends BaseCurd implements ICrud {
  public title = '角色管理'
  public createBtnText = '添加角色'
  public tableOptions: TableOptions = tableOptions
  public defSearchOptions: SearchParam[] = searchOptions
  public RoleLevel = RoleLevel
  public Type = Type

  dropdownBtns: DropdownOption[] = [
    {
      name: '查看角色',
      icon: 'el-icon-view',
      command: Type.View
    },
    {
      name: '编辑角色',
      icon: 'el-icon-edit',
      command: Type.Edit
    },
    {
      name: '编辑权限',
      icon: 'el-icon-setting',
      command: 'permission'
    },
    {
      name: '删除角色',
      icon: 'el-icon-delete',
      command: Type.Delete
    }
  ]

  async fetchTableData(searchParams: any) {
    const resp = await getRoles(searchParams)
    if (resp.data) {
      this.tableData = resp.data.records
      this.tableDataTotal = resp.data.total
      this.tableDataStatus = Object.fromEntries(
        resp.data.records.map((item: any) => [item.id, { loading: false }])
      )
    }
  }

  handlerCommand(command: any, id: number) {
    console.log('handlerEditCommand', command, id)
    if (command === Type.Delete) {
      this.$confirm('是否确认删除该角色', '提示', {
        type: 'warning'
      }).then(() => this.deleteRole(id))
    } else if (command === 'permission') {
      (this.$refs.rolePermission as any).open(id)
    } else {
      (this.$refs.form as any).open(command, id)
    }
  }

  async deleteRole(id: number) {
    this.tableDataStatus[id].loading = true
    try {
      await deleteRole(id)
      this.$message.success('删除成功')
      this.getTableData()
    } finally {
      this.tableDataStatus[id].loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.rolesPage {
  height: 100%;
  .content {
    height: calc(100% - 40px);
  }
}
</style>
